<template>
  <div class="app-container">
    <!-- 移动端骨架屏 -->
    <mobile-skeleton 
      v-if="isMobile && loading" 
      :showHeader="true"
      :showForm="true"
      :formFields="4"
      :showButton="true"
      :showPagination="false"
    />
    
    <div v-else>
      <el-row :gutter="24" :class="{'mobile-layout': isMobile}">
        <el-col :span="24">
          <div class="mobile-header" v-if="isMobile">
            <div class="back-btn" @click="handleBack">
              <img :src="backImg" />
            </div>
            <div class="page-title">认证详情</div>
            <div class="placeholder"></div>
          </div>
          
          <img v-if="!isMobile"
            :src="backImg"
            style="width:25px;height:25px;cursor:pointer"
            @click="handleBack"
          >
        </el-col>
        <el-col
          :span="24"
          style="margin: 20px 0"
        >
          <el-card class="pre-exam" :class="{'mobile-card': isMobile}">
            <div><strong>申请认证名称：</strong>{{ form.post }}</div>
            <div v-if="form.user!==undefined&&form.user.name!==undefined"><strong>申请人：</strong>{{ form.user.name }}</div>
            <div><strong>申请时间：</strong>{{ form.create_time }}</div>
            <div><strong>已完成课程培训：</strong>
              <span
                v-for="item in form.course "
                :key="item.id"
              >{{ item.name}} |

              </span>
            </div>
            <div><strong>已通过考试：</strong>
              <span 
                v-for="item in form.exam "
                :key="item.id"
                v-if="form.exam.length!==0&&form.exam"
              >{{ item.name}} |

              </span>
              <span v-else>无</span>
            </div>
            <div><strong>自述：</strong>{{ form.self_report }}</div>
            <div v-if="form.creator!==undefined&&form.creator.name!==undefined" ><strong>审核人：</strong>{{ form.creator.name }}</div>
            <div><strong>认证状态：</strong>{{ form.state |stateFilter}}</div>
            <!-- <div><strong>认证评估：</strong>{{ form.approver }}</div> -->
          </el-card>
        </el-col>

        <el-col :span="24">
          <el-button
            :loading="loading"
            type="primary"
            icon="el-icon-caret-right"
            v-hasPermi="['certification:certificationDetail:query']"
            @click="handlePass"
            v-if="show&&form.state=='未审批'"
            :style="{backgroundColor:theme,borderColor:theme,fontWeight:'bold'}"
            :class="{'mobile-button': isMobile}"
          >
            去审核
          </el-button>
        </el-col>
        
        <!-- 添加或修改岗位对话框 -->
        <el-dialog
          :title="title"
          :visible.sync="open"
          width="500px"
          append-to-body
          :class="{'mobile-dialog': isMobile}"
        >
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            :label-width="isMobile ? '0px' : '120px'"
            :label-position="isMobile ? 'top' : 'right'"
          >
            <el-col :span="24">
              <div class="form-section" v-if="isMobile">
                <div class="section-title">是否通过</div>
              </div>
              <el-form-item
                label="是否通过"
                prop="state"
                v-if="!isMobile"
              >
                <el-radio-group v-model="form.state">
                  <el-radio :label="1">不通过</el-radio>
                  <el-radio :label="2">通过</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-radio-group v-model="form.state" v-if="isMobile" class="mobile-radio">
                <el-radio :label="1">不通过</el-radio>
                <el-radio :label="2">通过</el-radio>
              </el-radio-group>
            </el-col>

            <el-col :span="24">
              <div class="form-section" v-if="isMobile">
                <div class="section-title">认证评估</div>
              </div>
              <el-form-item
                label="认证评估"
                prop="evaluate"
                v-if="!isMobile"
              >
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="请输入认证评估内容"
                  v-model="form.evaluate"
                >
                </el-input>
              </el-form-item>
              <el-input
                v-if="isMobile"
                type="textarea"
                :rows="4"
                placeholder="请输入认证评估内容"
                v-model="form.evaluate"
                class="mobile-textarea"
              >
              </el-input>
            </el-col>
          </el-form>
          <div
            slot="footer"
            class="dialog-footer"
          >
            <el-button
              type="primary"
              @click="submitForm"
              :class="{'mobile-button': isMobile}"
              :style="{backgroundColor:theme,borderColor:theme}"
            >确 定</el-button>
            <el-button @click="cancel" :class="{'mobile-button': isMobile}">取 消</el-button>
          </div>
        </el-dialog>
      </el-row>
    </div>
  </div>
</template>

<script>
import backImg from "@/assets/images/back.png";
import { mapGetters, mapState } from "vuex";
import variables from "@/assets/styles/variables.scss";
import {
  certificationDetail,
  certificationPass,
} from "@/api/vadmin/certification/certification";
import MobileSkeleton from "@/components/MobileSkeleton";

export default {
  name: "CertificationDetail",
  components: { 
    MobileSkeleton 
  },
  data() {
    return {
      form: {},
      show: true,
      loading: false,
      backImg: backImg,
      // 是否显示弹出层
      open: false,
      // 弹出层标题
      title: "",
      // 表单校验
      rules: {
        evaluate: [
          { required: true, message: "认证评估不能为空", trigger: "blur" },
        ],
        state: [
          { required: true, message: "是否通过不能为空", trigger: "blur" },
        ],
      },
      screenWidth: document.body.clientWidth,
      isMobile: false,
      mediaQueryList: null,
    };
  },
  computed: {
    ...mapState(["settings"]),
    variables() {
      return variables;
    },
    theme() {
      return this.$store.state.settings.theme;
    },
  },
  created() {
    const id = this.$route.params.id;
    // console.log("id", id);
    this.getList(id);
    // 监听屏幕宽度变化
    window.addEventListener('resize', this.handleResize);
  },
  mounted() {
    // 使用媒体查询API直接监听视口变化
    this.mediaQueryList = window.matchMedia('(max-width: 767px)');
    
    // 初始化isMobile状态
    this.isMobile = this.mediaQueryList.matches;
    
    // 为媒体查询添加监听器
    const handleMediaChange = (e) => {
      this.isMobile = e.matches;
      
      // 强制组件重新渲染
      this.$forceUpdate();
    };
    
    // 使用适当的API添加监听器
    if (this.mediaQueryList.addEventListener) {
      this.mediaQueryList.addEventListener('change', handleMediaChange);
    } else {
      // 旧版浏览器支持
      this.mediaQueryList.addListener(handleMediaChange);
    }
    
    // 存储监听器以便后续移除
    this.mediaChangeHandler = handleMediaChange;
  },
  beforeDestroy() {
    // 移除监听器
    window.removeEventListener('resize', this.handleResize);
    // 移除媒体查询监听器
    if (this.mediaQueryList) {
      if (this.mediaQueryList.removeEventListener) {
        this.mediaQueryList.removeEventListener('change', this.mediaChangeHandler);
      } else {
        // 旧版浏览器支持
        this.mediaQueryList.removeListener(this.mediaChangeHandler);
      }
    }
  },
  filters: {
    stateFilter(state) {
      if (state == 0) {
        return "未认证";
      } else {
        return "已认证";
      }
    },
  },
  methods: {
    // 处理屏幕大小变化
    handleResize() {
      this.screenWidth = document.body.clientWidth;
    },
    handleBack() {
      this.$router.back()//返回浏览器上一页，并保留上一页数据
    },
    getList(id) {
      this.loading = true;
      certificationDetail(id).then((res) => {
        // console.log("详情", res);
        this.form = res;
        this.form.id = res.id;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    handlePass() {
      this.reset();
      this.open = true;
      this.title = "审核认证";
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    reset() {
      this.form = {
        state: undefined,
        evaluate: undefined,
        id: this.$route.params.id,
      };
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          certificationPass(this.form).then((response) => {
            this.msgSuccess("认证审核成功");
            this.open = false;
            this.show = false;
            this.getList(this.$route.params.id);
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: transparent;
  padding: 0;
  
  .pre-exam {
    div {
      margin-bottom: 10px;
    }
  }
}

/* 移动端样式 */
.mobile-layout {
  .mobile-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    padding: 0 15px;
    margin: -10px -10px 15px;
    
    .back-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      
      img {
        width: 24px;
        height: 24px;
      }
    }
    
    .page-title {
      font-size: 17px;
      font-weight: 500;
    }
    
    .placeholder {
      width: 40px;
    }
  }
  
  .mobile-card {
    margin: 0 15px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    
    /deep/ .el-card__body {
      padding: 15px;
      font-size: 14px;
      
      div {
        margin-bottom: 12px;
        
        strong {
          display: block;
          margin-bottom: 5px;
          color: #606266;
        }
      }
    }
  }
  
  .mobile-button {
    margin: 20px 15px;
    width: calc(100% - 30px);
    height: 44px;
    font-size: 16px;
    border-radius: 8px;
  }
  
  .form-section {
    margin: 15px 0 10px;
    
    .section-title {
      font-size: 15px;
      font-weight: 500;
      color: #333;
      margin-bottom: 10px;
    }
  }
  
  .mobile-radio {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-around;
    width: 100%;
    
    /deep/ .el-radio {
      margin-right: 0;
    }
    
    /deep/ .el-radio__label {
      font-size: 15px;
    }
  }
  
  .mobile-textarea {
    width: 100%;
    margin-bottom: 15px;
    
    /deep/ .el-textarea__inner {
      border-radius: 8px;
      padding: 12px;
      font-size: 15px;
      min-height: 120px;
    }
  }
}

/deep/ .mobile-dialog {
  width: 95% !important;
  margin: 0 auto !important;
  border-radius: 12px;
  overflow: hidden;
  
  .el-dialog__header {
    padding: 15px;
    background-color: #f5f7fa;
    text-align: center;
    font-weight: bold;
  }
  
  .el-dialog__body {
    padding: 15px;
    max-height: 70vh;
    overflow-y: auto;
  }
  
  .el-dialog__footer {
    padding: 10px 15px 15px;
    text-align: center;
  }
  
  .mobile-button {
    width: 45%;
    height: 40px;
    font-size: 16px;
    border-radius: 8px;
    margin: 0 5px;
  }
}
</style>

